/*
 *人员管理页面文件
 */
'use strict';
import React, { Component } from 'react';
import { Link } from 'react-router';
import { connect } from 'react-redux';
import {regionArray, endexData} from '@app/constants/DataSource.jsx';
import { Row, Col, Form, Button, Icon, Card, Breadcrumb, Input, Spin, Table, Select } from 'antd';
import './UserManage.css';
const FormItem = Form.Item;
const Option = Select.Option;

class UserManage extends Component {
  constructor(props) {
    super(props);
    this.state = {
      loading:true,
      dataSource:[],
      name:'',
      tel:'',
      position:-1
    };
  }

  componentDidMount(){
    setTimeout(() => {
    this.setState({loading:false});
    const dataSource = [];
    let i = 0;
    endexData.map((item) => {
      item.user.map((index) => {
        index.ranksId = item.ranksId;
        index.region = regionArray[item.key-1];
        index.key = i;
        i++;
        dataSource.push(index);
      })
    });
    this.setState({dataSource});
    },300);
  }

  handleSearch = () =>{
    const dataSource = [];
    let i = 0;
    endexData.map((item) => {
      item.user.map((index) => {
        index.ranksId = item.ranksId;
        index.region = regionArray[item.key-1];
        index.key = i;
        i++;
        if(this.state.tel === '' || index.tel === this.state.tel){
          if(this.state.name === '' || index.name === this.state.name){
            if(this.state.position === -1 || index.position === this.state.position){
              dataSource.push(index);
            }
          }
        }
      })
    });
    this.setState({dataSource});
  }
   
  render() {  
    const columns = [{
      title: '姓名',
      dataIndex: 'name',
    }, {
      title: '队伍编号',
      dataIndex: 'ranksId',
    }, {
      title: '手机号码',
      dataIndex: 'tel',
    }, {
      title: '地区',
      dataIndex: 'region',
    },{
      title: '职位',
      dataIndex:'position'
    }];

    return (
      <div className = 'workbench'>
        <Row gutter = {16}>
          <Col span = {24}>
            <Card loading = {this.state.loading}>
              <Breadcrumb>
                <Breadcrumb.Item><Link to='/Analysis'>首页</Link></Breadcrumb.Item>
                <Breadcrumb.Item>人员管理</Breadcrumb.Item>
              </Breadcrumb>
              <Form
                className='ant-advanced-search-form'
              >
                <Row>
                  <Col span = {24} style = {{paddingTop:30,textAlign:'center'}}>
                    <Col span={7}>
                      <FormItem label='职位'>
                        <Select defaultValue={-1} style={{ width: 200 }} onChange = {(e) => this.setState({position:e})}>
                          <Option value={-1}>全部</Option>
                          <Option value='系统管理员'>系统管理员</Option>
                          <Option value='分析员'>分析员</Option>
                          <Option value='数据管理员'>数据管理员</Option>
                          <Option value='财务'>财务</Option>
                          <Option value='净化员'>净化员</Option>
                          <Option value='其他'>其他</Option>
                        </Select>
                      </FormItem>
                    </Col>
                    <Col span={7}> 
                      <FormItem label='姓名' >
                        <Input placeholder='请输入姓名' style={{ width: 200 }} onChange = {(e) => this.setState({name:e.target.value})}/>
                      </FormItem>
                    </Col>
                    <Col span={7}>
                      <FormItem label='手机号码'>
                        <Input placeholder='请输入手机号码' style={{ width: 200 }} onChange = {(e) => this.setState({tel:e.target.value})}/>
                      </FormItem>
                    </Col>
                    <Col span={3} style = {{paddingTop:5}}>
                      <Button type='primary' onClick = {this.handleSearch} >搜索</Button>
                    </Col>
                  </Col>
                  </Row>
                </Form>
              <Table dataSource={this.state.dataSource} columns={columns} />
            </Card>
          </Col>
         </Row>
      </div>
    );
  }
}

function mapStateToProps(state) {
  return {
   
  }
}
export default connect(
  mapStateToProps, {
    
  }
)(UserManage)
